<script setup lang="ts">
import DownloadSimilar from "@/components/HYHome/downloadSimilar.vue";
import DownloadComment from "@/components/HYHome/downloadComment.vue";
import DownloadUpdateAndSimilar from "@/components/HYHome/downloadUpdateAndSimilar.vue";
import DownloadGameInfo from "@/components/HYHome/downloadGameInfo.vue";
import DownloadBottomNavigation from "@/components/HYHome/downloadBottomNavigation.vue";
import DownloadAppImg from "@/components/HYHome/downloadAppImg.vue";
</script>
<template>
  <!-- 下载apk页面 -->
  <div class="downPage-frame">
    <div class="navigation-frame df ai-center jc-space-between">
      <img
        class="google-img"
        style="height: 37px; width: 166px"
        src="@/image/new_img/download_game/GooglePlaybestapp.png"
      />
      <img
        class="google-img1"
        src="@/image/new_img/download_game/GooglePlaybestapp-right.png"
        style="height: 36px; width: 114px"
      />
    </div>
    <div class="apk-frame-content">
      <div class="interval-div0-frame"></div>
      <div class="apk-logo-name-frame df">
        <img
          class="apk-logo-frame"
          aria-hidden="true"
          itemprop="image"
          data-iml="2267.2999999523163"
          data-atf="true"
          src="@/image/new_img/logo1080FgzU_320.png"
          style="position: relative; box-shadow: unset; width: 72px; height: 72px"
        />
        <div class="apk-name-frame">
          <div class="apk-name">Fortune Tiger</div>
          <div class="website-frame">BR11.COM</div>
          <div class="UIuSk">Verificado pelo aplicativo</div>
        </div>
      </div>
      <!-- 下载量 -->
      <div
        data-v-0dde8330=""
        class="JU1wdd"
        style="height: 64px; margin: 16px 0 14px 0px; padding: 12px 0"
      >
        <div data-v-0dde8330="" class="l8YSdd">
          <div data-v-0dde8330="" class="w7Iutd">
            <div data-v-0dde8330="" class="wVqUob" style="min-width: 82px; padding-right: 16px">
              <div data-v-0dde8330="" class="ClM7O" style="height: 24px">
                <div data-v-0dde8330="" itemprop="starRating">
                  <div
                    data-v-0dde8330=""
                    aria-label="Avaliado com 4,4 de 5 estrelas"
                    class="TT9eCd"
                  >
                    4,9<i data-v-0dde8330="" aria-hidden="true" class="google-material-icons ERwvGb"
                      >star</i
                    >
                  </div>
                </div>
              </div>
              <div data-v-0dde8330="" class="g1rdde" style="height: 20px">46K&nbsp;avaliações</div>
            </div>
            <div data-v-0dde8330="" class="wVqUob" style="min-width: 82px; padding: 0 24px">
              <div data-v-0dde8330="" class="ClM7O" style="height: 24px">50&nbsp;mil+</div>
              <div data-v-0dde8330="" class="g1rdde" style="height: 20px">Downloads</div>
            </div>
            <div data-v-0dde8330="" class="wVqUob" style="min-width: 82px; padding: 0 24px">
              <div data-v-0dde8330="" class="ClM7O" style="height: 24px">
                <img
                  data-v-0dde8330=""
                  src="https://play-lh.googleusercontent.com/_KiRouu_G6J_2jwePzQ_i5_FMc_SVKT3mI7d7KKq9zca-Nr8bj2bPasawLvk6ajzASQS-90a8hYXeAh0lQ=w48-h16-rw"
                  srcset="
                    https://play-lh.googleusercontent.com/_KiRouu_G6J_2jwePzQ_i5_FMc_SVKT3mI7d7KKq9zca-Nr8bj2bPasawLvk6ajzASQS-90a8hYXeAh0lQ=w96-h32-rw 2x
                  "
                  alt="Classificação do conteúdo"
                  itemprop="image"
                  data-iml="2267.2999999523163"
                  data-atf="true"
                  class="T75of xGa6dd"
                />
              </div>
              <div data-v-0dde8330="" class="g1rdde" style="height: 20px">
                <span data-v-0dde8330="" itemprop="contentRating"
                  ><span data-v-0dde8330="">Rated for 18+</span></span
                >
                <div
                  data-v-0dde8330=""
                  role="button"
                  tabindex="0"
                  aria-label="Saiba mais sobre a classificação do conteúdo"
                  class="MKV5ee"
                ></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 按钮 -->
      <div class="google-install-app-frame" style="margin-top: -0.5rem">
        <div class="google-install-app shiny">
          <div
            style="
              display: flex;
              justify-content: center;
              align-items: center;
              margin-top: 0.3rem;
              color: rgb(255, 227, 54);
              line-height: unset;
            "
          >
            <img
              src="@/image/new_img/download_game/0136_shandian_caise.svg"
              style="margin-right: 0.1rem; width: 0.5rem; height: 0.5rem"
            />
            <span style="color: rgb(255, 227, 54)">Rapid Instalar</span>
          </div>
          <div style="font-size: 0.3rem; height: 10px; line-height: 0px">
            Baixe dentro de 15 segundos
          </div>
        </div>
      </div>

      <!-- 分享 -->
      <div style="position: relative; margin-left: 0.5rem; margin-top: 0.7rem">
        <div class="df ai-center">
          <div class="df ai-center">
            <span
              data-v-26f44c5c=""
              class="VfPpkd-kBDsod y0nrBe df ai-center"
              style="position: relative"
              ><svg data-v-26f44c5c="" width="24" height="24" viewBox="0 0 24 24" class="f70z8e">
                <path
                  data-v-26f44c5c=""
                  d="M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92 1.61 0 2.92-1.31 2.92-2.92s-1.31-2.92-2.92-2.92z"
                />
              </svg>
            </span>
            <span
              data-v-26f44c5c=""
              aria-hidden="true"
              class="VfPpkd-vQzf8d"
              style="margin-left: 0.2rem; font-size: 0.426rem; color: rgb(1, 135, 95)"
              >Compartilhar</span
            >
          </div>
          <div
            data-v-26f44c5c=""
            class="OahvPe"
            style="
              position: absolute;
              top: -0.1rem;
              width: 4rem;
              margin-left: 4rem;
              display: flex;
              align-items: center;
              margin-right: 0.5rem;
            "
          >
            <span
              data-v-26f44c5c=""
              class="VfPpkd-kBDsod y0nrBe"
              style="position: relative; width: 24px; height: 24px"
              ><svg
                data-v-26f44c5c=""
                width="24"
                height="24"
                viewBox="0 0 24 24"
                class="XkAcee"
                style="color: rgb(1, 135, 95); fill: rgb(1, 135, 95); stop-color: rgb(1, 135, 95)"
              >
                <path
                  data-v-26f44c5c=""
                  fill-rule="evenodd"
                  clip-rule="evenodd"
                  d="M7 3H17C18.1045 3 19 3.8955 19 5V21L12 18L5 21L5.01075 5C5.01075 3.8955 5.8965 3 7 3ZM12 15.824L17 18V5H7V18L12 15.824ZM13 7V9H15V11H13V13H11V11H9V9H11V7H13Z"
                />
              </svg>
            </span>
            <span
              data-v-26f44c5c=""
              aria-hidden="true"
              class="VfPpkd-vQzf8d"
              style="margin-left: 0.2rem; font-size: 0.426rem; color: rgb(1, 135, 95)"
              >Adicionar à lista de desejos</span
            >
          </div>
        </div>
      </div>
      <!-- 照片 -->
      <!-- <div
        data-v-26f44c5c=""
        style="position: relative; margin-top: 0.8rem; width: 9rem; height: 240px"
      >
        <div data-v-26f44c5c="" jsname="K9a4Re" role="list" class="aoJE7e qwPPwf">
          <div data-v-26f44c5c="" role="listitem" class="ULeU3b Utde2e">
            <div data-v-26f44c5c="" jscontroller="RQJprf" class="Atcj9b">
              <img
                data-v-26f44c5c=""
                src="//oss.goodoss.net/images/poster/85an1727622051653179.png"
                class="T75of B5GQxf"
                style="width: auto; height: 224px"
              />
            </div>
          </div>
          <div data-v-26f44c5c="" role="listitem" class="ULeU3b Utde2e">
            <div data-v-26f44c5c="" jscontroller="RQJprf" class="Atcj9b">
              <img
                data-v-26f44c5c=""
                src="//oss.goodoss.net/images/poster/tefo1727622052190800.png"
                class="T75of B5GQxf"
                style="width: auto; height: 224px"
              />
            </div>
          </div>
          <div data-v-26f44c5c="" role="listitem" class="ULeU3b Utde2e">
            <div data-v-26f44c5c="" jscontroller="RQJprf" class="Atcj9b">
              <img
                data-v-26f44c5c=""
                src="//oss.goodoss.net/images/poster/7tr21727622052778772.png"
                class="T75of B5GQxf"
                style="width: auto; height: 224px"
              />
            </div>
          </div>
          <div data-v-26f44c5c="" role="listitem" class="ULeU3b Utde2e">
            <div data-v-26f44c5c="" jscontroller="RQJprf" class="Atcj9b">
              <img
                data-v-26f44c5c=""
                src="//oss.goodoss.net/images/poster/ihxr1727622053324938.png"
                class="T75of B5GQxf"
                style="width: auto; height: 224px"
              />
            </div>
          </div>
          <div data-v-26f44c5c="" role="listitem" class="ULeU3b Utde2e">
            <div data-v-26f44c5c="" jscontroller="RQJprf" class="Atcj9b">
              <img
                data-v-26f44c5c=""
                src="//oss.goodoss.net/images/poster/m15u1727622053925642.png"
                class="T75of B5GQxf"
                style="width: auto; height: 224px"
              />
            </div>
          </div>
          <div data-v-26f44c5c="" role="listitem" class="ULeU3b Utde2e">
            <div data-v-26f44c5c="" jscontroller="RQJprf" class="Atcj9b">
              <img
                data-v-26f44c5c=""
                src="//oss.goodoss.net/images/poster/hxau1727622054482631.png"
                class="T75of B5GQxf"
                style="width: auto; height: 224px"
              />
            </div>
          </div>
          <div data-v-26f44c5c="" role="listitem" class="ULeU3b Utde2e">
            <div data-v-26f44c5c="" jscontroller="RQJprf" class="Atcj9b">
              <img
                data-v-26f44c5c=""
                src="//oss.goodoss.net/images/poster/ggs31727622055041776.png"
                class="T75of B5GQxf"
                style="width: auto; height: 224px"
              />
            </div>
          </div>
          <div data-v-26f44c5c="" role="listitem" class="ULeU3b Utde2e">
            <div data-v-26f44c5c="" jscontroller="RQJprf" class="Atcj9b">
              <img
                data-v-26f44c5c=""
                src="//oss.goodoss.net/images/poster/eidx1727622055970551.png"
                class="T75of B5GQxf"
                style="width: auto; height: 224px"
              />
            </div>
          </div>
        </div>
      </div> -->
      <!-- 图片内容 -->
      <DownloadAppImg />
      <!-- 关于整个游戏 -->
      <DownloadSimilar />
      <!-- 评论和评分 -->
      <DownloadComment />
      <!-- 有更新内容和类似游戏 -->
      <DownloadUpdateAndSimilar />
      <!-- 底部消息 -->
      <DownloadGameInfo />
      <!-- 底部导航栏 -->
      <DownloadBottomNavigation />
    </div>
  </div>
</template>
<style lang="less" scoped>
@import "@/styles/google.css";
.downPage-frame {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  .navigation-frame {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 105px;
    z-index: 20;
    background-color: #ffffff;
    .google-img {
      width: 332px;
      height: 74px;
      margin-left: 36px;
    }
    .google-img1 {
      width: 228px;
      height: 74px;
      margin-right: 26px;
    }
  }
  .apk-frame-content {
    width: calc(100% - 36px);
    height: 100%;
    margin-left: 36px;
    overflow-y: scroll;
    .interval-div0-frame {
      width: 100%;
      height: 190px;
    }
    &::-webkit-scrollbar {
      display: none;
      overflow: -moz-scrollbars-none; /* Firefox */
      -ms-overflow-style: none; /* IE 和 Edge */
    }
    .apk-logo-name-frame {
      width: 100%;
      height: auto;
      .apk-logo-frame {
        width: 110px;
        height: 110px;
        border-radius: 20%;
        box-shadow: 0 1px 2px 0 rgb(60 64 67 / 30%), 0 1px 3px 1px rgb(60 64 67 / 15%);
      }
      .apk-name-frame {
        width: 50%;
        margin-left: 40px;
        .apk-name {
          width: auto;
          font-size: 50px;
          font-weight: 500;
          font-family: "Google Sans", Roboto, Arial, sans-serif;
          word-break: keep-all;
          overflow-wrap: anywhere;
          line-height: 56px;
        }
        .website-frame {
          font-size: 32px;
          font-weight: 500;
          font-family: "Google Sans", Roboto, Arial, sans-serif;
          color: #01875f;
          line-height: 60px;
        }
        .UIuSk {
          font-size: 24px;
          font-weight: 400;
          font-family: "Google Sans", Roboto, Arial, sans-serif;
          line-height: 33.3px;
        }
      }
    }
    .JU1wdd-frame {
      width: calc(100% - 52px);
      margin-top: 36px;
      .wVqUob-frame {
        padding: 0 36px;
        position: relative;
        .wVqUob {
          max-width: 172px;
          flex: 1;
          fill: rgb(32, 33, 36);
          stop-color: rgb(32, 33, 36);
          font-family: "Google Sans", Roboto, Arial, sans-serif;
          font-size: 27px;
          letter-spacing: 0.00793em;
          font-weight: 500;
          line-height: 36px;
          padding: 0 36px;
          .ClM7O-frame {
            line-height: 40px;
          }
          .unnamed-img {
            width: 22px;
            height: 22px;
          }
          .unnamed-img-frame {
            line-height: 30px;
            padding-top: 3px;
            margin-bottom: 2px;
          }
        }
        .g1rdde {
          fill: rgb(95, 99, 104);
          stop-color: rgb(95, 99, 104);
          font-family: Roboto, Arial, sans-serif;
          line-height: 23.2px;
          font-size: 26px;
          letter-spacing: 0.00111em;
          font-weight: 400;
          align-items: center;
          display: flex;
          // height: 40px;
          justify-content: center;
          white-space: nowrap;
        }
      }
      .wVqUob-frame:first-child {
        padding-left: 0;
      }
      .wVqUob-frame:not(:first-child)::before {
        background-color: rgb(232, 234, 237);
        content: "";
        display: block;
        height: 28px;
        left: 0;
        position: absolute;
        top: calc(50% - 12px);
        width: 1px;
      }
    }
    .google-install-app-frame {
      width: 100%;
      height: auto;
      position: relative;
      left: 0;
      top: 0;
      overflow: hidden;
      .google-install-app {
        // width: 90%;
        margin: 0;
        height: 112.5px;
      }
      .shiny::after {
        -webkit-animation: shiny-btn-anim-data-v-26f44c5c 4s ease-in-out infinite;
        animation: shiny-btn-anim-data-v-26f44c5c 4s ease-in-out infinite;
        background-color: #fff; /* 光束的颜色 */
        content: "";
        display: inline-block;
        height: 100%; /* 高度覆盖整个父级 */
        left: 0;
        position: absolute;
        top: -180px; /* 初始位置在父级元素的上方 */
        width: 30px; /* 光束的宽度 */
        opacity: 0; /* 初始化透明度 */
        pointer-events: none; /* 让光束不会影响交互 */
      }
      @keyframes shiny-btn-anim-data-v-26f44c5c {
        0% {
          opacity: 0;
          -webkit-transform: scale(0) rotate(45deg);
          transform: scale(0) rotate(45deg);
        }
        80% {
          opacity: 0.5;
          -webkit-transform: scale(0) rotate(45deg);
          transform: scale(0) rotate(45deg);
        }
        81% {
          opacity: 1;
          -webkit-transform: scale(4) rotate(45deg);
          transform: scale(4) rotate(45deg);
        }
        to {
          opacity: 0;
          -webkit-transform: scale(50) rotate(45deg);
          transform: scale(50) rotate(45deg);
        }
      }
    }
  }
}
.qwPPwf::-webkit-scrollbar {
  display: none;
  overflow: -moz-scrollbars-none; /* Firefox */
  -ms-overflow-style: none; /* IE 和 Edge */
}
/**************************** */
.JU1wdd {
  margin: 0.21333rem 0 0.32rem 0rem;
}
.wVqUob:not(:first-child)::before {
  background-color: rgb(232, 234, 237);
  content: "";
  display: block;
  height: 48px;
  left: 0;
  position: absolute;
  top: calc(50% - 24px);
  width: 1px;
}
.google-install-app {
  width: calc(100% - 50px);
}
</style>
